<template>
  <div class="banner">

    <div class="banner_content">

      <div class="header">
        <van-nav-bar
        	right-text=""
				left-arrow


          title="消息通知"
          @click-left="onClickLeft">

          <!--<van-icon name="chat-o" slot="right" />-->
        </van-nav-bar>
      </div>



      <div class="list-content" id="list-content" >
        <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
                <van-list
                    v-model="loading"
                    :finished="finished"
                    @load="onLoad"
                    finished-text="没有更多了"
                    :immediate-check="immediate"
                    :offset="10"
                >
                <!--循环部分--->

                <div class="city_list list-item"
                     v-for="(m, i) in msgs"
                     :key="i"
                     :title="m"
                     style="background: #FFFFFF;">

                  <div  class="city_list_item">
                    {{m.create_date| formatDate}}
                  </div>

								  <div class="xt_info">
								 	  <p style="font-size: 18px;">
                      {{m.type_title}}
								 	  </p>
								 	  <p style="margin-top: 1vh;font-size: 14px;">
                      {{m.content}}
								 	  </p>
								  </div>
					      </div>

					</van-list>
        </van-pull-refresh>

   </div>



</div>
</div>






</template>
<script>
    import {Toast} from 'vant'
    import { Dialog } from 'vant';
    import {formatDate} from '../../utils/filters.js'
    export default {
        data() {
            return {
                userId:'',
                msgs:[],
                page:0,
                isLoading:false,
                loading: false,   //是否处于加载状态
                finished: false,  //是否已加载完所有数据
                immediate:true


            }
        },
        filters:{
            formatDate(time){
                var data = new Date(time);
                return formatDate(data,'yyyy-MM-dd hh:mm');
            }
        },
        mounted:function(){
            this.userId = this.$route.query.userId;
        	  let winHeight = document.documentElement.clientHeight;                        //视口大小
            var listHeight = document.getElementById('list-content').style.height = (winHeight - 46) +'px'  //调整上拉加载框高度

        },
        methods:{
            get_msg(type){
                const that = this;
                that.$sendRequest('/index/get_msg',"userId="+that.userId+"&page="+that.page).then(function(res){

                    that.isLoading = false;
                    that.loading = false;
                    if(res.data.code ==0){
                        if(res.data.result.ms.length < 10){
                           that.finished = true;
                        }
                        for(var i = 0;i<res.data.result.ms.length;i++){
                            that.msgs.push(res.data.result.ms[i]);
                        }
                        if(type ==0){
                            that.finished = false;
                        }
                    }

                })
            },
            onClickLeft(){
                this.$router.back(-1);
            },
            onRefresh(){
              console.log("下拉刷新");
                const  that = this;
                that.isLoading = true;

                that.page = 0;
                that.msgs=[];
                that.get_msg(0);

            },
        	  onLoad() {
        		  console.log("上拉加载");
        		  console.log(this.finished);
        		  if(this.msgs.length != 0){
        		      this.page = this.page+1;
              }
        		  this.get_msg(1);

            }

        }
    }
</script>
<style scoped="scoped">
  /**{
    margin: 0;
    padding: 0;
  }*/
 .header >>>.van-nav-bar__text{
 	color: #000000;
 }
 .header >>> .van-nav-bar .van-icon{
 	color: #000000;
 }
 .xt_info{
 	padding: 3vw;

 }
 .xt_info{
 	text-align: left;
 }

   .list-content{
       /* margin-top:46px;*/
        overflow:scroll;
    }
    .list-item{
        text-align:center;
    }

 .qrcode_img{
 	display: flex;
 	justify-content: space-between;
 	margin-left: 2vh;
 	margin-right: 2vh;
 	border-bottom: 1px solid #F6F6F6;
 }
 .qrcode_img img{
 	  width: 6vw;
 }
 .Span_contnt{
 	width: 0.5vw;
 	height: 3vh;
 	display: inline-block;
 	vertical-align: middle;
 	background: #4C9FFD;
 }
 .qrcode_img{
 	height: 5vh;
 	line-height: 5vh;
 }
 .qrcode_img img{
 	vertical-align: middle;
 }
  .jife{
    color: #999999;
    font-size: 12px;
  }
  .banner{
    background: #F6F6F6;
  }
  .city_list_item{
  	background: #F6F6F6 !important;
  	display: flex;
  	justify-content: center;
  	padding: 1vw;
  	font-size: 12px;
  }
  .city_list_item p{
  	font-size: 14px;
  }
  .city_list_item .p_city{
  	font-size: 12px;
  	vertical-align: middle;

  }

  .coollelt >>> [class*=van-hairline]::after{
    border:none;
  }
  .coollelt>>>.van-icon-home-o:nth-child(1){
    background: #4C9FFD;
    border-radius: 50%;
    color: #FFFFFF;
    padding: 12px;
  }
  .flex_shouye{
    display: flex;
    justify-content: space-around;
    background: #FFFFFF;
    padding: 3vw;

  }
  .flex_shouye div{

    flex: 1;

  }
  #felex_idcon{
    background: #4C9FFD;
    color: #FFFFFF;
  }

  #felex_idcon .jife{
    color: #FFFFFF;
  }
  .flex_shouye div img{
    width: 9vw;
  }
  .banner_content{

  	height: 100vh;
  }
  .list_header_content {
  	line-height: 4vh;
    height: 4vh;
    background: rgb(255, 255, 255);
    text-align: left;
    padding-left: 1vw;
  }
  p{
    margin: 0;
    padding: 0;
  }
  .flex_shouye span{
    font-size: 12px;
  }
  .city_list{
  	margin-top: 1vh;
  	margin-bottom: 1vh;
  }
  .van-icon-arrow-left:before {
		color: #2c3e50;
	}
</style>

